import {DatePicker, Input, Select} from "antd";
import React from "react";
import BaseComponent from "../../../redare/components/BaseComponent";
import locale from "antd/es/date-picker/locale/zh_CN";
import ReactDOM from "react-dom";
import 'moment/locale/zh-cn';
import moment from "moment";

/**
 * 文本日期
 */
export default class TextDate extends BaseComponent {

  static defaultProps = {};

  dateObj = {};

  state = {
    dateValue: null,
    inputValue: '',
    selectType: 0,
  };

  constructor(props){
    super(props);
    this.calendarContainer = props.calendarContainer;
  }

  componentDidMount(){

  }

  // set
  setData(value){
    let isDate = moment(value).isValid();
    let obj = {};
    if( isDate ){
        obj.selectType = 0;
        obj.dateValue = moment(value);
        this.dateValue = moment(value);
    }else {
        obj.selectType = 1;
        obj.inputValue = value;
        this.inputValue = value;
    }
    this.setState( obj );
  }

  getData(){
    let {selectType} = this.state;
    let {inputValue, dateValue} = this;
    return selectType === 0 ? dateValue : inputValue;
  }

  // 重置
  restData(){
    this.dateObj = {};
    this.setState({startValue: null, endValue: null});
  }


  render() {

    return (
      <div
        ref={(the)=>{ this.textDate = the }}
        className={"flex"}
      >
        <Select
          style={{width: '80px'}}
          value={this.state.selectType}
          onChange={(value, option)=>{
            this._onSelectChange(value);
          }}
        >
          <Select.Option value={0}>选择</Select.Option>
          <Select.Option value={1}>输入</Select.Option>
        </Select>
        <div style={{flex: 1, marginLeft: '10px'}}>
          {
            this.state.selectType === 0
              ?
            <DatePicker
              {...this.props}
              style={{width: '100%'}}
              disabledDate={this._disabledDate}
              locale={locale}
              placeholder="选择日期"
              value={this.state.dateValue}
              onChange={this._onDateChange}
              getCalendarContainer={() => ReactDOM.findDOMNode(this.calendarContainer)}
            />
              :
            <Input placeholder={"输入日期"} value={this.state.inputValue} onChange={(e)=>{

              this.inputValue = e.target.value;
              this.setState({inputValue: e.target.value});
              if (this.props.onChange) {
                this.props.onChange(e.target.value)
              }
            }} />
          }

        </div>

      </div>
    );

  }

  _onSelectChange(value){
    this.setState({selectType: value});
    if (this.props.onChange) {
      this.props.onChange(value)
    }
  }

  _onDateChange = (moment, value) => {
    this.dateObj["dateValue"] = value;
    this.dateValue = moment;
    this.setState({ dateValue: moment});
    if (this.props.onChange) {
      this.props.onChange(value)
    }
  };

  _disabledDate = endValue => {
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

}